<template>
    <div id="login" @click="close">
        <div class="main" @click.stop>
            <div class="content">
                <div class="login" v-if="islogin">
                    <h1
                        style="
                            font-family: Quicksand;
                            color: black;
                            font-weight: 100;
                            text-align: center;
                            margin: 50px 0 20px 0;
                        "
                    >
                        登 录
                    </h1>
                    <el-form
                        :model="loginForm"
                        label-width="120px"
                        ref="loginForm"
                    >
                        <el-form-item label="用户名" prop="user">
                            <el-input
                                v-model="loginForm.user"
                                style="width: 80%"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="密码" prop="password">
                            <el-input
                                type="password"
                                v-model="loginForm.password"
                                style="width: 80%"
                            ></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button
                                type="primary"
                                style="margin-left: 81px"
                                @click="login('loginForm')"
                                >立即登录</el-button
                            >
                        </el-form-item>
                    </el-form>
                </div>
                <div class="touming"></div>
                <div class="zhuce" v-if="!islogin">
                    <el-form label-width="120px">
                        <h1
                            style="
                                font-family: Quicksand;
                                color: black;
                                font-weight: 100;
                                text-align: center;
                                margin: 50px 0 20px 0;
                            "
                        >
                            注 册
                        </h1>
                        <el-form-item label="昵称" prop="nickname">
                            <el-input
                                type="text"
                                v-model="ruleForm.nickname"
                                style="width: 80%"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="用户名" prop="user">
                            <el-input
                                type="text"
                                v-model="ruleForm.user"
                                style="width: 80%"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="是否商家" prop="isSeller">
                            <el-radio-group v-model="ruleForm.isSeller">
                                <el-radio :label="1">是</el-radio>
                                <el-radio :label="2">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="密码" prop="pass">
                            <el-input
                                type="password"
                                v-model="ruleForm.pass"
                                style="width: 80%"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="确认密码" prop="checkPass">
                            <el-input
                                type="password"
                                v-model="ruleForm.checkPass"
                                style="width: 80%"
                            ></el-input>
                        </el-form-item>

                        <el-form-item>
                            <el-button
                                type="primary"
                                style="margin-left: 81px"
                                @click="submitForm('ruleForm')"
                                >立即注册</el-button
                            >
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <el-button
                class="login-button"
                @click="this.islogin = !this.islogin"
                v-if="!islogin"
                >登录</el-button
            >
            <el-button
                class="zhuce-button"
                @click="this.islogin = !this.islogin"
                v-if="islogin"
                >注册</el-button
            >
            <el-button type="info" class="fh1" v-if="!islogin" @click="close"
                >返回</el-button
            >
            <el-button type="info" class="fh2" v-if="islogin" @click="close"
                >返回</el-button
            >
        </div>
    </div>
</template>

<script>
import { mapMutations } from "vuex";
import qs from "qs";

export default {
    emits: ["close"],
    name: "Login",
    data() {
        var checkUser = (rule, value, callback) => {
            let reg = /^[^\s]{2,8}$/;
            if (!value) {
                return callback(new Error("用户名不能为空"));
            } else if (reg.test(value)) {
                callback();
            } else {
                callback(new Error("2-8位非空格字符"));
            }
        };
        var validatePass = (rule, value, callback) => {
            let reg = /^[\w,.?;<>/|\\:'"!@#$%^&*()+-]{6,16}$/;
            if (reg.test(value)) {
                callback();
            } else if (value === "") {
                callback(new Error("请输入密码"));
            } else {
                callback(new Error("6-16位字符"));
            }
        };
        var validatePass2 = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请再次输入密码"));
            } else if (value !== this.ruleForm.pass) {
                callback(new Error("两次输入密码不一致!"));
            } else {
                callback();
            }
        };
        return {
            islogin: true,
            loginForm: {
                user: "",
                password: "",
            },
            ruleForm: {
                user: "",
                isSeller: 2,
                pass: "",
                checkPass: "",
                nickname: "",
            },
            rules: {
                pass: [{ validator: validatePass, trigger: "blur" }],
                checkPass: [{ validator: validatePass2, trigger: "blur" }],
                user: [{ validator: checkUser, trigger: "blur" }],
                nickname: [{ validator: checkUser, trigger: "blur" }],
            },
            activeName: "login",
        };
    },
    methods: {
        // vuex
        ...mapMutations(["updateUser", "admin"]),
        // 注册
        submitForm(formName) {
            this.$axios({
                method: "post",
                url: "http://localhost:8081/ts/user/register",
                data: qs.stringify({
                    username: this.ruleForm.user,
                    password: this.ruleForm.pass,
                    isSeller: this.ruleForm.isSeller,
                    nickname: this.ruleForm.nickname,
                }),
            }).then((res) => {
                console.log(res);
                // 显示错误信息
                if (res.data.respCode !== "200") {
                    return this.$message.error(res.data.respDesc);
                }
                // 注册成功提示
                this.$message.success("注册成功");
                // 跳到登录界面
                this.islogin = true;
                // 清空表单
                this.$refs.ruleForm.resetFields();
            });
        },
        login(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (this.loginForm.user === "hpc") {
                        this.$axios({
                            method: "post",
                            url: "http://localhost:8081/ts/admin/login",
                            headers: {
                                "content-type":
                                    "application/x-www-form-urlencoded",
                            },
                            data: qs.stringify({
                                username: this.loginForm.user,
                                password: this.loginForm.password,
                            }),
                        }).then((res) => {
                            console.log(res);
                            // 显示错误信息
                            if (res.data.respCode !== "200") {
                                return this.$message.error(res.data.respDesc);
                            }
                            // 登录成功提示
                            this.$message.success("登录成功");
                            this.close();
                            this.$router.push("/admin");
                            this.admin();
                        });
                    } else {
                        this.$axios({
                            method: "post",
                            url: "http://localhost:8081/ts/user/login",
                            headers: {
                                "content-type":
                                    "application/x-www-form-urlencoded",
                            },
                            data: qs.stringify({
                                username: this.loginForm.user,
                                password: this.loginForm.password,
                            }),
                        }).then((res) => {
                            console.log(res);
                            // 显示错误信息
                            if (res.data.respCode !== "200") {
                                return this.$message.error(res.data.respDesc);
                            }
                            // 登录成功提示
                            this.$message.success("登录成功");
                            this.close();

                            // 清空表单
                            this.$refs.loginForm.resetFields();
                            // // 修改登录后用户vuex数据
                            this.updateUser(
                                JSON.parse(res.data.respData.userInfo)
                            );
                            localStorage.setItem(
                                "token",
                                res.data.respData.token
                            );
                            // location.reload();
                            console.log(this.$store.state);
                        });
                    }
                } else {
                    return false;
                }
            });
        },
        close() {
            this.$emit("close");
            this.$router.push("/");
        },
    },
};
</script>

<style scoped lang ='less'>
.touming {
    width: 500px;
    height: 500px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.18);
}
.content {
    position: relative;
    top: calc((100vh - 500px) / 2);
    left: calc((100vw - 1000px) / 2);
    width: 1000px;
    height: 500px;
    display: flex;
    .login,
    .zhuce {
        width: 500px;
        height: 500px;
        background: #eeededf9;
    }
    .login.hidden {
        visibility: hidden;
    }
    .login {
        border-top-left-radius: 15px;
        border-bottom-left-radius: 15px;
    }
    .zhuce {
        border-top-right-radius: 15px;
        border-bottom-right-radius: 15px;
    }

    .zhuce.hidden {
        visibility: hidden;
    }
}
.login-button {
    position: relative;
    top: calc(((100vh - 500px) / 2 - 270px));
    left: calc((100vw - 1000px) / 2 + 200px);
    background: linear-gradient(to right, rgb(53, 127, 224), rgb(40, 187, 143));
    width: 100px;
    border-radius: 20px;
    color: white;
    border: none;
    &:hover {
        color: #f6f6f6;
    }
}
.fh1 {
    position: relative;
    top: calc(((100vh - 500px) / 2 - 200px));
    left: calc((100vw - 1000px) / 2 + 90px);
    width: 100px;
    border-radius: 20px;
}
.fh2 {
    position: relative;
    top: calc(((100vh - 500px) / 2 - 200px));
    left: calc((100vw - 1000px) / 2 + 590px);
    width: 100px;
    border-radius: 20px;
}
.zhuce-button {
    position: relative;
    top: calc(((100vh - 500px) / 2 - 270px));
    left: calc((100vw - 1000px) / 2 + 700px);
    border: none;
    color: white;
    background: linear-gradient(to right, rgb(53, 127, 224), rgb(40, 187, 143));
    width: 100px;
    border-radius: 20px;
    &:hover {
        color: #f6f6f6;
    }
}

#login {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    .main {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 100%;
        padding: 10px 30px;
        transform: translate(-50%, -50%);
        /* background-color: #fff; */
        background: url("../assets/img/bg/111.jpg");
        background-size: cover;

        /deep/ .el-tabs__nav-wrap::after {
            display: none;
        }

        /deep/ .el-tabs__content {
            height: 800px !important;
        }

        /deep/ .el-tabs__active-bar {
            display: none;
        }

        #pane-login,
        #pane-zhuce {
            background: #ededed;
            width: 400px;
            height: 400px;
        }

        #pane-login {
            position: relative;
            top: calc((100vh - 500px) / 2);
            left: calc((100vw - 1300px) / 2);
        }

        #pane-zhuce {
            position: relative;
            top: calc((100vh - 500px) / 2);
            left: calc((100vw - 800px) / 2 + 150px);
        }

        /deep/ #tab-login {
            position: relative;
            padding-left: 19px;
            top: calc((100vh - 500px) / 2 + 180px);
            left: calc((100vw - 800px) / 2);
            background: linear-gradient(
                to right,
                rgb(3, 109, 157),
                rgb(30, 108, 91)
            );
            border-radius: 20px;
            color: white;
            &:hover {
                color: white;
            }
        }

        /deep/ #tab-zhuce {
            position: relative;
            width: 95px;
            top: calc((100vh - 500px) / 2 + 180px);
            left: calc((100vw - 800px) / 2 + 400px);
            background: linear-gradient(
                to right,
                rgb(3, 109, 157),
                rgb(30, 108, 91)
            );
            border-radius: 20px;
            color: white;
            &:hover {
                color: white;
            }
        }
        /deep/ .el-tabs__nav-wrap {
            overflow: visible;
        }
        /deep/ .el-tabs__nav-scroll {
            overflow: visible;
        }
    }
}
</style>